<template>
	<PullRefresh :http-option="httpOption">
		<Banner ref="banner" class="banner" :ratio="0.2933"/>
		<div class="list">
			<Cell v-for="item in data.list"
			      :key="item.uid"
			>
				<ImageView :src="item.thumb" class="thumb"/>
				<ImageView :src="item.avatar" class="avatar"/>
				<div class="user-name">{{item.user_nicename}}</div>
			</Cell>
		</div>
	</PullRefresh>
</template>

<script>
    import {reactive, ref} from 'vue'
    import PullRefresh from "/src/components/common/pull-refresh";
    import Cell from "/src/components/common/cell";
    import ImageView from "/src/components/common/image-view";
    import Banner from "/src/components/common/banner";
    import Http from "/src/utils/js/http";

    export default {
        name: "Live",
        components: {PullRefresh, Cell, ImageView, Banner},
        setup() {
            const banner = ref()
            const data = reactive(
                {
                    list: [],
                    slide: []
                }
            )
            const bannerImgUrls = []
            const httpOption = {
                loadData(p, callback) {
                    Http.getMainHomeLive(p, callback)
                },
                refreshSucc(code, msg, info) {
                    console.log('Live', code, msg, info)
                    data.list = info[0].list
                    data.slide = info[0].slide
                    if (bannerImgUrls.length === 0) {
                        data.slide.forEach((item, index) => {
                            bannerImgUrls[index] = item.slide_pic
                        })
                        banner.value.startPlay(bannerImgUrls)
                    }
                },
                loadMoreSucc(code, msg, info) {
                    console.log('Live', code, msg, info)
                    const list = info[0].list
                    data.list.push(...list)
                }
            }
            return {
                banner,
                data,
                httpOption,
            }

        }
    }
</script>

<style lang="less" scoped>
	@import "/src/utils/style/color";
	
	.banner {
		margin: 0 5px 5px 5px;
	}
	
	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 5px 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	
	.thumb {
		border-radius: 5px;
	}
	
	.avatar {
		height: 34px;
		width: 34px;
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		left: 5px;
		bottom: 5px;
		
	}
	
	.user-name {
		color: @white;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 16px;
	}
</style>
